<template>
  <div id="app2">
    <el-container>
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="12" id="left">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="3">
                <span slot="title">欢迎光临:&nbsp;{{ username }}</span>
              </el-menu-item>
              <el-menu-item index="1">
                <i class="el-icon-menu"></i>
                <span slot="title" @click="shouye">首页</span>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span class="span">页面管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" id="el" @click="myshop1"
                    >我的商铺</el-menu-item
                  >
                  <el-menu-item index="1-2" id="el" @click="myshop2"
                    >添加商铺</el-menu-item
                  >
                  <el-menu-item index="1-3" id="el" @click="myshop3"
                    >商铺管理</el-menu-item
                  >
                  <el-menu-item index="1-4" id="el" @click="myshop4"
                    >食品管理</el-menu-item
                  >
                  <el-menu-item index="1-5" id="el" @click="myshop5"
                    >订单管理</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">业务管理</a></el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
          <el-dropdown>
            <span class="el-dropdown-link">
              个人中心<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
          <v-nav></v-nav>
            </el-dropdown-menu>
          </el-dropdown>
        </el-breadcrumb>

        <el-row :gutter="20">
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple" id="chart1"></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple" id="chart4">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180">
                </el-table-column>
                <el-table-column prop="address" label="地址"> </el-table-column>
              </el-table></div
          ></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"
            ><div class="grid-content bg-purple" id="chart3"></div
          ></el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple" id="chart2"></div
          ></el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import nav from "../components/nav.vue"
import * as echarts from "echarts";
export default {
  components: {
    'v-nav':nav
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      input: "",
      username: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  created() {
    console.log(11);
    let info = window.localStorage.getItem("info");
    console.log(info);
    this.username = info;
  },
  mounted() {
    //   第一个图表
    this.myChart1 = echarts.init(document.getElementById("chart1"));
    this.option = {
      color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
      title: {
        text: "渐变堆叠面积图"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985"
          }
        }
      },
      legend: {
        data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"]
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "总量",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(128, 255, 165)"
              },
              {
                offset: 1,
                color: "rgba(1, 191, 236)"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: [140, 232, 101, 264, 90, 340, 250]
        },
        {
          name: "Line 2",
          type: "line",
          stack: "总量",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 221, 255)"
              },
              {
                offset: 1,
                color: "rgba(77, 119, 255)"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: [120, 282, 111, 234, 220, 340, 310]
        },
        {
          name: "Line 3",
          type: "line",
          stack: "总量",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(55, 162, 255)"
              },
              {
                offset: 1,
                color: "rgba(116, 21, 219)"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: [320, 132, 201, 334, 190, 130, 220]
        },
        {
          name: "Line 4",
          type: "line",
          stack: "总量",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 0, 135)"
              },
              {
                offset: 1,
                color: "rgba(135, 0, 157)"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: [220, 402, 231, 134, 190, 230, 120]
        },
        {
          name: "Line 5",
          type: "line",
          stack: "总量",
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          label: {
            show: true,
            position: "top"
          },
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(255, 191, 0)"
              },
              {
                offset: 1,
                color: "rgba(224, 62, 76)"
              }
            ])
          },
          emphasis: {
            focus: "series"
          },
          data: [220, 302, 181, 234, 210, 290, 150]
        }
      ]
    };
    this.myChart1.setOption(this.option);

    // 第二个图表
    this.myChart2 = echarts.init(document.getElementById("chart2"));
    this.optoin1 = {
      series: [
        {
          name: "面积模式",
          type: "pie",
          radius: [30, 150],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: "rose 1" },
            { value: 38, name: "rose 2" },
            { value: 32, name: "rose 3" },
            { value: 30, name: "rose 4" },
            { value: 28, name: "rose 5" },
            { value: 26, name: "rose 6" },
            { value: 22, name: "rose 7" },
            { value: 18, name: "rose 8" }
          ]
        }
      ]
    };
    this.myChart2.setOption(this.optoin1);

    // 第三个图表
    this.myChart3 = echarts.init(document.getElementById("chart3"));
    this.option2 = {
      title: {
        text: "世界人口总量"
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        data: ["2011年", "2012年"]
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
      },
      xAxis: {
        type: "value",
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: "category",
        data: ["巴西", "印尼", "美国", "印度", "中国", "世界人口(万)"]
      },
      series: [
        {
          name: "2011年",
          type: "bar",
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
          name: "2012年",
          type: "bar",
          data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
      ]
    };
    this.myChart3.setOption(this.option2);
  },
  methods: {
    shouye(){
      console.log(33)
    },
    tuichu(){
      console.log(22222)
    },
    myshop1() {
      this.$router.push("/shops/myshop");
    },
    myshop2() {
      this.$router.push("/shops/add");
    },
    myshop3() {
      this.$router.push("/shops/shop");
    },
    myshop4() {
      this.$router.push("/shops/food");
    },
    myshop5() {
      this.$router.push("/shops/order");
    },
    handleOpen() {},
    handleClose() {},
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    }
  }
};
</script>

<style scoped>
#el {
  color: #fff;
}
.span {
  background-color: rgb(10, 6, 51);
}
.el-menu-item.is-active {
  background-color: rgb(10, 6, 51);
}
.div {
  margin-bottom: 20px;
}
.el-breadcrumb {
  border-bottom: 1px solid gray;
  margin-bottom: 20px;
}
.el-main {
  padding: 0;
  margin-left: 20px;
}
.el-aside {
  overflow: hidden;
}
#chart1,
#chart2,
#chart3,
#chart4 {
  height: 350px;
  margin: 20px 0;
}
.el-row {
  margin: 0 !important;
}
.el-aside {
  position: fixed;
}
.el-main {
  padding-left: 200px;
}
</style>
